<template>
  <!-- 新增登记使用 -->
  <div class="layout">
    <ContainerTitle text="登记使用记录列表">
      <template>
        <Buttons :buttons="buttons" @goRelease="$router.push({ name: 'capitalRegisterAdd' })"></Buttons>
      </template>
    </ContainerTitle>
    <div class="msgDiv">
      <el-table
        :data="capitalRegisterList"
        style="width: 100%"
        min-height="400"
        :border="true"
        :header-cell-style="{ background: '#F4F4F4', color: '#045DB9' }"
      >
        <el-table-column
          prop="capitalUsage"
          label="资金使用事项"
          width="150"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="usageLimit" label="资金使用额度" width="120">
          <template slot-scope="scope">
            <span>{{
              scope.row.usageLimit ? scope.row.usageLimit / 10000 + "万" : ""
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="moneyFlow"
          label="资金流向处"
          width="160"
          show-overflow-tooltip
        >
        </el-table-column>

        <el-table-column prop="usageTime" label="使用时间" width="100">
        </el-table-column>
        <el-table-column
          prop="projectCategory"
          label="项目类型"
          width="100"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="manager"
          label="经手人"
          width="160"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="reviewer"
          label="审核人"
          width="100"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="reviewerTime" label="审核时间" width="100">
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="60">
          <template slot-scope="scope">
            <span class="rowBtn" @click="toDetail(scope.row)">详情</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { registrationListView } from "@/common/api/company.js";
export default {
  data() {
    return {
      buttons:[{ text: " 新增资金使用登记 ", type: "success", size: "xxl", method: "goRelease" }],
      name: "finance",
      currentPage: 1,
      pageSize: 10,
      total: 0,
      crumbs: [
        {
          label: "企业空间",
          value: "company",
        },
        {
          label: "金融服务",
          value: "",
        },
        {
          label: "资金使用登记",
          value: "capitalRegister",
        },
        {
          label: "登记使用记录列表",
          value: "",
          choose: true,
        },
      ],
      capitalRegisterList: [],
      applyStatusList: [
        {
          value: 0,
          label: "待审核",
        },
        {
          value: 1,
          label: "审核中",
        },
        {
          value: 2,
          label: "审核通过",
          color: "#10a217",
        },
        {
          value: 3,
          label: "审核未通过",
          color: "#d00000",
        },
      ],
      ids: [],
      enterpriseId: ''
    };
  },
  mounted() {
    this.ids = this.$route.query.capitalId;
    this.getList();
  },
  methods: {
    async getList() {
      let res = await registrationListView({
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          capitalId: this.ids
        });
      if (res.code == 200) {
        this.capitalRegisterList = res.rows;
        this.total = res.total;
        // 格式化时间
        this.capitalRegisterList.forEach((el) => {
          el.usageTime = new Date(el.usageTime).pattern("yyyy-MM-dd");
          el.reviewerTime = new Date(el.reviewerTime).pattern("yyyy-MM-dd");
        });
      }
    },

    /**
     * 返回上一页
     */
    goBack: function () {
      this.$router.back();
    },
    toDetail(row) {
      this.$router.push({
        name: "capitalRegisterListDetail",
        query: { id: row.id, status: row.status },
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },
  },
};
</script>
<style scoped>
.breadcrumb {
  width: 1000px;
  margin: 20px 0;
}
.backBtn {
  border: 1px solid #eeeeee;
  white-space: nowrap;
  font-size: 12px;
  height: 30px;
  width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  cursor: pointer;
}
.roomDiv {
  display: flex;
  justify-content: center;
}

.roomDiv .leftDiv {
  width: 200px;
  text-align: left;
}

.roomDiv .rightDiv {
  width: 800px;
  margin-left: 30px;
}
.titleDiv {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  padding: 10px;
  font-size: 20px;
  font-weight: bold;
  color: #045db9;
  margin-bottom: 20px;
  right: -5px;
  top: 0;
}
.titleDiv .sendBtn {
  font-weight: normal;
  color: #ffffff;
  background: #045db9;
  border-radius: 5px;
  font-size: 15px;
  display: flex;
  align-items: center;
  padding: 10px;
  cursor: pointer;
}
.layout {
  min-height: 100vh;
  position: relative;
  padding-bottom: 150px;
  box-sizing: border-box;
}
.msgDiv {
  margin: 40px 0;
}

.block {
  margin-top: 14px;
  text-align: right;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.rowBtn {
  cursor: pointer;
}
</style>